<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">					
			* {
				margin: 0;
				padding: 0;
			}
			
			#box {
				width: 750px;
				height: 370px;
				margin: 100px auto;
			}
			
			#box>ul>li {
				width: 164px;
				height: 98px;
				list-style: none;
				float: left;
				margin: 10px;
				border: 1px solid #aaa;
				position: relative;
			}
			
			#box>ul>li:hover {
				border: 2px solid #0db6ca;
				margin: 9px;
			}
			
			#box>ul>li:hover img {
				z-index: 4;
				position: absolute;
			}
			
			.show {
				width: 0;
				height: 0;
				background: #fff;
				position: absolute;
				z-index: 3;
				top: -2px;
				left: 162px;
				padding: 0;
				overflow: hidden;
				transition: all 0.3s ease;
			}
			
			.show dt {
				font-weight: bold;
				font-size: 20px;
			}
			
			.show dd {
				margin: 10px 0;
				font-size: 14px;
				color: #999;
			}
			
			.show dd li {
				list-style: none;
			}
			
			.show dd span {
				color: #333;
				margin-left: 10px;
			}
			
			#box>ul>li:hover .show {
				border: 2px solid #0db6ca;
				display: block;
				width: 300px;
				height: 180px;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<ul>
				<li>
					<img src="img/1.jpg" />
					<div class="show">
						<dl>
							<dt>详细信息</dt>
							<dd>详细信息描述...</dd>
							<dd>
								<ul>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
								</ul>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<img src="img/2.jpg" />
					<div class="show">
						<dl>
							<dt>详细信息</dt>
							<dd>详细信息描述...</dd>
							<dd>
								<ul>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
								</ul>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<img src="img/3.jpg" />
					<div class="show">
						<dl>
							<dt>详细信息</dt>
							<dd>详细信息描述...</dd>
							<dd>
								<ul>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
								</ul>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<img src="img/4.jpg" />
					<div class="show">
						<dl>
							<dt>详细信息</dt>
							<dd>详细信息描述...</dd>
							<dd>
								<ul>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
								</ul>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<img src="img/5.jpg" />
					<div class="show">
						<dl>
							<dt>详细信息</dt>
							<dd>详细信息描述...</dd>
							<dd>
								<ul>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
								</ul>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<img src="img/6.jpg" />
					<div class="show">
						<dl>
							<dt>详细信息</dt>
							<dd>详细信息描述...</dd>
							<dd>
								<ul>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
								</ul>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<img src="img/7.jpg" />
					<div class="show">
						<dl>
							<dt>详细信息</dt>
							<dd>详细信息描述...</dd>
							<dd>
								<ul>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
								</ul>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<img src="img/8.jpg" />
					<div class="show">
						<dl>
							<dt>详细信息</dt>
							<dd>详细信息描述...</dd>
							<dd>
								<ul>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
								</ul>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<img src="img/9.jpg" />
					<div class="show">
						<dl>
							<dt>详细信息</dt>
							<dd>详细信息描述...</dd>
							<dd>
								<ul>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
								</ul>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<img src="img/10.jpg" />
					<div class="show">
						<dl>
							<dt>详细信息</dt>
							<dd>详细信息描述...</dd>
							<dd>
								<ul>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
								</ul>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<img src="img/11.jpg" />
					<div class="show">
						<dl>
							<dt>详细信息</dt>
							<dd>详细信息描述...</dd>
							<dd>
								<ul>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
								</ul>
							</dd>
						</dl>
					</div>
				</li>
				<li>
					<img src="img/12.jpg" />
					<div class="show">
						<dl>
							<dt>详细信息</dt>
							<dd>详细信息描述...</dd>
							<dd>
								<ul>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
									<li>详细信息1<span>详细信息1描述。。。</span></li>
								</ul>
							</dd>
						</dl>
					</div>
				</li>
			</ul>
		</div>

	</body>

</html>